<template>
  <van-tab :title="'推荐'" :name="name">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <van-cell class="more">
        <newsLi :newsList="newsList"></newsLi>
      </van-cell>
    </van-list>
  </van-tab>
</template>

<script>
import {getNews} from "@/http/api";
import newsLi from "@/components/newsLi";

export default {
  name: "Recommend",
  data(){
    return {
      name:0,
      newsList:[],
      num:10,
      loading: false,
      finished: false,
    }
  },
  components:{
    newsLi
  },
  methods:{
    //加载更多新闻事件
    onLoad() {
      // 异步更新数据
      this.num += 10
      sessionStorage.removeItem('num')
      sessionStorage.setItem('num',String(this.num))
      getNews(this.num).then(res=>{
        this.newsList = res.data.rows
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.newsList.length >= 100) {
          this.finished = true;
        }
      })
    },
  },
  created() {
    //获取推荐新闻
    getNews(this.num).then(res=>{
      this.newsList = res.data.rows
    })
  }
}
</script>

<style scoped lang="less">
  .more {
    padding: 0!important;
  }

</style>